<template>
	<div id="app">
		
		<div class="app_login" v-if="login.state === false">
			<div class="alog-box">
				
				<form class="al-box-form">
					<h3>优惠券后台</h3>
					<div class="al-b-f-text">
						<i class="unameicon" aria-hidden="true"></i>
						<input id="int-name" tyep="text" max="18" min="6" name="uname" placeholder="账号" v-model="login.uname"  autocomplete="off"/>
						<label for="int-name" class="form-int"></label>
					</div>
					
					<div class="al-b-f-text">
						<i class="pwdicon" aria-hidden="true"></i>
						<input id="int-pwd" type="password" max="18" min="6" name="pwd" placeholder="密码" v-model="login.pwd" />
						<label for="int-pwd" class="form-int"></label>
					</div>
					
					<div class="al-b-f-verify">
						<span class="g0 tc">{{ list }}</span>
						<div :class="(login.checked == true ? 'al-b-f-v-save' : 'al-b-f-v-nosave')" title="保留登录状态的选项">
							<label for="checkbox"><p v-if="login.checked == true">保留</p></label>
							<input type="checkbox" id="checkbox" v-model="login.checked">
						</div>
					</div>
					
					<button class="al-b-f-btn" type="button" @click="register">登陆</button>
					
				</form>
				
			</div>
		</div>
		
		<div class="app_list" v-else>
			<div class="topbar">
				  
				<div class="top-title">应用中心</div>
				  
				<div class="top-left">
					<div class="t-le-explain"><p>页面/</p><p>优惠券</p></div><div class="t-le-username"><p>顶汇智农</p><i></i></div>
				</div>
				  
			</div>
			
			<div class="al-content">
				
				<div class="alcon-navigation">
				  
				  	<el-menu default-active="0" class="el-menu-vertical-demo"><!--  @open="handleOpen" @close="handleClose" -->
				  	   
				  	    <el-menu-item v-for="(item,indexa) in navioption" :key="indexa" :index="item.id.toString()"  @click="navBar(item,indexa)">
				  			<span slot="title">{{item.name}}</span>
				  		</el-menu-item>
				  	
				  	</el-menu>
				  	
				</div>
				
				<div v-if="navbar == 0" class="al-con-data"><router-view /></div>
				<div v-else-if="navbar == 1" class="al-con-data">未注册的秒杀组件</div>
				<div v-else-if="navbar == 2" class="al-con-data">未注册的拼团组件</div>
				<div v-else-if="navbar == 3" class="al-con-data">未注册的支付营销组件</div>
				<div v-else-if="navbar == 4" class="al-con-data">未注册的自定义海报组件</div>
				<div v-else-if="navbar == 5" class="al-con-data">未注册的砍价组件</div>
				<div v-else class="al-con-data">未注册的分享红包组件</div>
				
			</div>
			
		</div>
		
	</div>
</template>

<script>
	// import coupon from "./components/coupon.vue"
export default {
	data(){
		return{
			checked:false,
			list: "", //登陆失败的原因
			intervalid: null, //定时器置空
			login: {state:false,checked:false,uname: "",pwd: ""},//登录验证，state成功登录，retain登录状态是否保留，账号以及号码
			navbar: 0,
			navioption:[//侧边栏的数组
				{id:0,name:"优惠券",status:false},
				{id:1,name:"秒杀",status:false},
				{id:2,name:"拼团",status:false},
				{id:3,name:"支付营销",status:false},
				{id:4,name:"自定义海报",status:false},
				{id:5,name:"砍价",status:false},
				{id:6,name:"分享红包",status:false},
			],
		}
	},
	// components:{//页面内注册组件
	// 	coupon
	// },
	 methods: {
		navBar(item,indexa){//侧边栏的选中状态切换
			const that = this
			if(that.navbar == indexa){
				return false
			}else{
				that.navbar = indexa
			}
		},
		register(){//登录按钮的函数
			const axios = require('axios');
			const that = this
			let load = {name: that.login.uname,password: that.login.pwd}
			let upload = JSON.stringify(load)
			axios({
				method: 'post',
				url: '/api/api/coupon/login.php',
				headers: { "Content-Type": "application/JSON" },
				data: upload		
			})
			.then(resp=>{
				console.log(resp)
				let data = resp.data.data //登录的数据赋值
				//登录验证失败
				if(data.namestatus === 0 || data.passwordstatus === 0){
					that.list = "请核对您的账号密码是否正确"
					this.intervalId = setTimeout(() => {//定时器3秒后置空list，取消页面登陆验证失败原因
					  this.list = "";
					}, 5000);
				//登录验证成功
				}else{
					//false显示登录，true显示后台页，判断赋值
					if(that.login.state === false){
						//判断用户是否选中保留登录信息的选项，配合页面刷新监听的使用，选中数据提交到缓存
						if(that.login.checked === true){
							sessionStorage.setItem("login", JSON.stringify(that.login));
						}
						that.login.state = !that.login.state //赋值的跳转效果
					}else{return}
				}
				
			})
			.catch(err=>{console.log(resp)})
		},
	},
	created() {//声明周期函数，用来监听页面刷新的，保留登录状态和页面显示内容的数据上传
		//在页面加载时读取sessionStorage里的状态信息
		if (sessionStorage.getItem("login")) {
			this.login = JSON.parse(sessionStorage.getItem("login"))
		}
		//用事件句柄监听，在页面刷新时将vuex里的信息保存到sessionStorage里
		console.log(this.login.checked)
		if(this.login.checked === true){
			window.addEventListener("beforeunload", () => {
				sessionStorage.setItem("login", JSON.stringify(this.login));
			});
		}else{return}
	},
  }
</script>

<style>
	html,body{
		height: 100%;
	}
	p{
		display: inline;
	}
	#app{
		min-width: 1052px;/* 列表加元素要调整宽度 */
		/* min-height: 916px; */
		min-height: 100vh;
		background-color: #f7f7f7;
	}
	/* 登录界面 */
	.app_login{
		/* min-height: 916px; */
		min-height: 100vh;
		background: url(assets/bgcimg.jpeg);
		background-size: 100% 100%;
	}
	.alog-box{
		position: fixed;
		top: 50%;
		left: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 380px;
		height: 260px;
		padding: 20px;
		background-color: rgb(255,255,255,0.3);
		border-radius: 10px;
		box-shadow: 1px 1px 8px 2px #000000; /* 前面两个值是位置左上角开始，后面两个值是晕影和粗细 */
		transform: translate(-50%,-50%);
	}
	.al-box-form{
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		width: 70%;
		height: 100%;
	}
	.al-box-form>h3{
		text-align: center;
		color: #ffd500;
		text-shadow: 1px 1px 2px #000000;
	}
	.al-b-f-text{
		position: relative;
		display: flex;
		justify-content: center;		
		align-items: center;
		height: 40px;
		color: rgb(189, 189, 189);
		background-color: white;
		border-radius: 5px;
	}
	div.al-b-f-text>input {
		width: calc(100% - 31.16px);
		color: rgb(255, 148, 25);
		border: 0;
		outline: none;
	}
	.unameicon{
		display: inline-block;
		width: 30px;
		height: 30px;
		background: url(assets/uname.png) no-repeat 100% 100%;
	}
	.pwdicon{
		background: url(assets/pwd.png) no-repeat 100% 100%;
	}
	div.al-b-f-text>i{
		display: inline-block;
		width: 25px;
		height: 25px;
		margin: 0 5px;
	}
	.form-int {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0;
		border: 1px solid rgb(187, 187, 187);
		border-radius: 5px;
	}
	input:focus,
	input:focus+i {
		color: rgb(255, 148, 25);
	}
	
	input:focus~.form-int {
		border: 1px solid rgb(255, 148, 25);
	}
	.al-b-f-btn {
		height: 50px;
		color: white;
		background-color: rgb(247, 169, 0);
		border: 0;
		border-radius: 5px;
		outline: none;
	}
	.al-b-f-verify{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #FFD500;
		text-shadow:  1px 1px 2px #000000;
	}
	.al-b-f-v-save{
		display: flex;
		align-items: center;
	}
	.al-b-f-v-nosave{
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #ff0004;
		text-shadow: 0 0 0 ;
	}
	
	
	/* 登录验证后的页面 */
	.topbar{
		display: flex;
		background-color: white;
	}
	.top-title{
		text-align: center;
		min-width: 130px;
		height: 50px;
		line-height: 50px;
	}
	.top-left{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 130px);
		height: 50px;
		padding: 0 20px;
	}
	.t-le-explain{
		display: flex;
	}
	
	.al-content{
		display: flex;
		height: 100%;
		min-height: calc(100vh - 50px);
	}
	.alcon-navigation{
		text-align: center;
		min-width: 130px;
	}
	ul{
		height: 100%;
		margin: 0;
		padding: 0;
	}
	li{
		min-width: 80px;
		line-height: 35px;
	}
	
	/* 路由的父级，也是侧边栏切换的父级 */
	.al-con-data{
		width: 100%;
		min-height: 866px;
		padding: 20px;
		box-sizing: border-box;
	}
</style>
